<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>用户评价</title>
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/aui.css" />
		<style>
			body {
			}
		#star{
			width:600px;
			margin:10px auto;
		}
		#star ul{
			float:left;
			display:inline;
			height:19px;
			line-height:19px;
		}
		#star ul{
			margin:0 10px;
		}
		#star li{
			float:left;
			width:25px;
			text-indent:-9999px;
			background:url(../../c-image/star12.png) no-repeat;
		}
		#star li.on{
			background-position:0 -28px;
		}
			.top-split-line {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<header id="header">
				<nav class="aui-bar aui-bar-nav">
					<a class="aui-pull-left" tapmode onclick="api.closeWin();"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
					<div class="aui-title">
						<strong>用户评价</strong>
					</div>
					<a class="aui-pull-right">发布</a>
				</nav>
			</header>
			<div id="main-content">
				<div class="aui-content top-split-line">
					<div class="aui-form">
						<ul class="aui-list-view">
							<li class="aui-list-view-cell">
								<ul id="star">
									<li><a href="javascript:;">1</a></li>
									<li><a href="javascript:;">2</a></li>
									<li><a href="javascript:;">3</a></li>
									<li><a href="javascript:;">4</a></li>
								<li><a href="javascript:;">5</a></li>
							</ul>
						</li>
					</ul>
						<div class="aui-input-row">
							<textarea id="content" name="content" class="aui-input" placeholder="总得说点什么吧"></textarea>
						</div>
						<ul id="scanImgs" class="aui-list-view">
							<li class="aui-list-view-cell aui-img">
								<img class="aui-img-object aui-pull-left" src="../../image/chatBox/chatBox_album1.png">
								<div class="aui-img-body">
									添加图片
									<p class='aui-ellipsis-2'>
										有图有真相
									</p>
								</div>
							</li>
						</ul>
						<ul id="imgzoon" class="aui-waterfall aui-hidden">
							<li>
								<div class="aui-waterfall-header">
									<img class="aui-img-object" style="vertical-align: center" src="../../image/addImgBtn.png" onclick="pageApi.chooseImgs();">
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
	</body>
	<script type="text/javascript" src="../../c-script/api.js"></script>
	<script type="text/javascript" src="../../c-asserts/aui/js/aui-waterfall.js"></script>
	<script type="text/javascript" src="../../c-script/winu-base.js"></script>
	<script type="text/javascript" src="../../c-script/public.js"></script>
	<script type="text/javascript" src="../../c-script/template.js"></script>
	<script id="imgViewTpl" type="text/html">
		{{each list as val i}}
		<li>
		<div class="aui-waterfall-header">
		{{if list[i].path == list[i].compressedPath}}
		<img src="{{val.path}}" data-pic-path="{{val.path}}" data-album-path="{{val.thumbPath}}">
		{{else}}
		<img src="{{val.compressedPath}}" data-pic-path="{{val.path}}" data-album-path="{{val.thumbPath}}">
		{{/if}}
		</div>
		<div class="aui-waterfall-footer">
		<i class="aui-iconfont aui-icon-close aui-text-warning" onclick="pageApi.unChooseImg(this);"></i>
		</div>
		</li>
		{{/each}}
	</script>
	<script type="text/javascript">
		var pageApi = {};
		var uiMediaScanner, imageFilter, qiniuModule;
		pageApi.renderImgs = function(data) {
			var html = template('imgViewTpl', data);
			var scanImgUl = $api.byId('scanImgs');
			var imgzoon = $api.byId('imgzoon');
			if (!$api.hasCls(scanImgUl, 'aui-hidden')) {
				$api.addCls(scanImgUl, 'aui-hidden');
			};
			if ($api.hasCls(imgzoon, 'aui-hidden')) {
				$api.removeCls(imgzoon, 'aui-hidden');
			}
			$api.before($api.last(imgzoon, 'li'), html);
		}
		
		pageApi.unChooseImg = function(el) {
			var liEl = el.parentNode.parentNode;
			var ulEl = liEl.parentNode;
			$api.remove(liEl);
			var scanImgUl = $api.byId('scanImgs');
			var imgzoon = $api.byId('imgzoon');
			var liElArr = $api.domAll(ulEl, 'li');
			if (liElArr == null || liElArr.length < 2) {
				$api.toggleCls(scanImgUl, 'aui-hidden');
				$api.toggleCls(imgzoon, 'aui-hidden');
			}
		}
		pageApi.chooseImgs = function() {
			uiMediaScanner.open({
				type : 'picture',
				column : 4,
				classify : true,
				max : 9,
				sort : {
					key : 'time',
					order : 'desc'
				},
				texts : {
					stateText : '已选*项',
					cancelText : '取消',
					finishText : '完成'
				},
				styles : {
					bg : '#fff',
					mark : {
						icon : '',
						position : 'bottom_left',
						size : 20
					},
					nav : {
						bg : '#b23e4b',
						stateColor : '#fff',
						stateSize : 18,
						cancelBg : 'rgba(0,0,0,0)',
						cancelColor : '#fff',
						cancelSize : 18,
						finishBg : 'rgba(0,0,0,0)',
						finishColor : '#fff',
						finishSize : 18
					}
				}
			}, function(ret) {
				if (ret && ret.list && ret.list.length > 0) {
					for (var i in ret.list) {
						ret.list[i].compressedPath = ret.list[i].path;
						_imgCompress(imageFilter, ret.list[i].path, 0.5, 0.5, ret.list[i].suffix, function(result) {
							if (result != null && result != '') {
								ret.list[i].compressedPath = result;
							}
						});
					}
					pageApi.renderImgs(ret);
				}
			});
		}
		pageApi.uploadImgs = function(imgs) {
			var uploadedImgs = new Array();
			if (imgs == null || imgs.length < 1) {
				return null;
			}
			var j = 0;
			for (var i in imgs) {
				qiniuModule.upfile({
					file : imgs[i]
				}, function(ret, err) {
					if (ret.status) {
						if (ret.oper == "complete") {
							//上传成功后组装访问路径，或直接访问文档
							// $api.text(b, baseUrl + ret.info.key);
							uploadedImgs[j++] = qiniuUrl + ret.info.key;
						} else if (ret.oper == "progress") {
							//上传过程中获取进度数据
							// $api.text(a, ret.percent);
						}
					}
				});
			}
			return uploadedImgs;
		}
		apiready = function() {
			 var oStar = document.getElementById("star");
			 var aLi = oStar.getElementsByTagName("li");
			 var oUl = oStar.getElementsByTagName("ul")[0];
			 var i = iScore = iStar = 0;
			 for (i = 1; i <= aLi.length; i++)
			 {
			  aLi[i - 1].index = i;
			  aLi[i - 1].onmouseover = function ()
			  {
			   fnPoint(this.index);
			  };
			  //点击后进行评分处理
			  aLi[i - 1].onclick = function ()
			  {
			   iStar = this.index;
			  }
			 }
			 //评分处理
			 function fnPoint(iArg)
			 {
			  //分数赋值
			  iScore = iArg || iStar;
			  for (i = 0; i < aLi.length; i++) aLi[i].className = i < iScore ? "on" : "";
			 }
			$aui.waterfall($api.byId("imgzoon"), {
				col : 2, //列数
				padding : 10, //容器内边距
				space : 10//列间距
			});
			qiniuModule = api.require('qiniuUpfile');
			// 引入多选模块
			uiMediaScanner = api.require('UIMediaScanner');
			// 引入过滤压缩模块
			imageFilter = api.require("imageFilter");
			api.parseTapmode();
			var header = $api.byId("header");
			$api.fixStatusBar(header);
			$api.fixIos7Bar(header);
			$api.addEvt($api.byId('scanImgs'), 'click', function() {
				pageApi.chooseImgs();
			});
			$api.addEvt($api.dom(header, "a.aui-pull-right"), 'click', function() {
				var evalStar = '0';
				if (( evalStar =  iStar) == '') {
					api.alert({
						msg : '请给个评分好不。'
					});
					return;
				};
				// 上传图片
				var imgs = $api.domAll($api.byId("imgzoon"), "li img");
				var imgUrls = new Array();
				if (imgs != null && imgs.length > 1) {
					var tmpLocalUrl = null;
					var j = 0;
					for (var i in imgs) {
						tmpLocalUrl = $api.attr(imgs[i], 'data-pic-path');
						if (tmpLocalUrl && tmpLocalUrl != '') {
							imgUrls[j++] = tmpLocalUrl;
						}
					}
				}
				if (imgUrls.length > 0) {
					imgUrls = pageApi.uploadImgs(imgUrls);
				}
				// 上传是异常的，帮这里暂2s/张
				setTimeout(function() {
					alert($api.jsonToStr(imgUrls));
					// 发布评论
					var data = {
						code : getUserCode(),
						content : document.getElementById("content").value,
						themeid : api.pageParam.themeid,
						evalStar : evalStar,
					};
					if (imgUrls && imgUrls.length > 0) {
						data.photo = $api.jsonToStr(imgUrls);
					}
					myPostAjax('user/Evaluate.json', data, function(ret) {
						if (ret && ret.isSuccess) {
							api.alert({
								msg : '操作成功！'
							}, function(ret, err) {
								api.closeWin({
								});
							});
						} else {
							api.alert({
								msg : ret && ret.message != '' ? ret.message : '操作失败！'
							});
						}
					});
				}, imgUrls && imgUrls.length > 0 ? 2 * 1000 * imgUrls.length : 500);
			});
		};
	</script>
</html>